<template>
	<view v-if="confirmShow">
		<uni-transition mode-class="fade" duration="2000">
			<view class="confirm" :style="{ '--primary-color': props.borderColor }">
				<view class="confirm-head">
					<view class="confirm-title">{{ props.titleText }}</view>
					<input v-if="isInputShow" style="margin-top: 30rpx;border:1rpx solid #ccc;border-radius: 10rpx;min-height: 60rpx;" />
				</view>
				<view class="confirm-bottom" @click="close">
					<button style="color:#000;backgroundColor:#fff;">取消</button>
					<button style="color:orange;backgroundColor:#fff;">确定</button>
				</view>
			</view>
		</uni-transition>
	</view>	
</template>

<script setup>
import { defineProps, onMounted, ref, defineExpose } from 'vue';
/**
 * buttonTab 弹框
 * @description 
 * @property {String} borderColor 边框颜色
 * @property {Boolean} isInputShow 弹出
 * @property {String} titleText 标题
 */
const props = defineProps({
	borderColor: {
		type: String,
		default: '#ccc',
	},
	isInputShow: {
		type: Boolean,
		default: true
	},
	titleText: {
		type: String,
		default: '操作提示'
	}
})

const confirmShow = ref(false);
const open = () => {
	confirmShow.value = true;
}

const close = () => {
	confirmShow.value = false;
}

defineExpose({
	open
})
</script>

<style lang="scss">
.confirm {
	width: 400rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	border-width: 1rpx;
	border-style: solid;
	border-color: var(--primary-color);
	border-radius: 20rpx;
	box-sizing: border-box;
	transform: translate(-50%,-50%);
	.confirm-head {
		padding: 30rpx;
		.confirm-title {
			text-align: center;
		}
	}
	.confirm-bottom {
		display: flex;
		border-top: 1rpx solid #ccc;
		position: relative;
		&::after {
			position: absolute;
			content: '';
			height: 100%;
			width: 1rpx;
			background-color: #ccc;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
button {
	&::after {
		border: none;
	}
}
</style>